<template>
  <div class="page_padding out_detail">
    <MyNavBar @goback="goback" :title="title" />
    <div class="notice_con">
      <div class="outduty_detail">
        <p
          class="result_hint"
          :class="
            formData.dailyStatus == '0' ? 'r_btn_red' : formData.dailyStatus == '1' ? 'r_btn_success' : 'r_btn_primary'
          "
          v-if="formData.dailyStatus">
          {{ menuData(formData.dailyStatus) }}
        </p>
        <div class="self_info">
          <div class="self_title_bold">基本信息</div>
          <div class="correlation_info">
            <div class="left">申请人</div>
            <div class="right">{{ formData.createBy }}</div>
          </div>
          <div class="correlation_info">
            <div class="left">部门名称</div>
            <div class="right">{{ formData.orgName }}</div>
          </div>
          <div class="correlation_info">
            <div class="left">联系电话</div>
            <div class="right">{{ formData.mobile }}</div>
          </div>
          <div class="correlation_info">
            <div class="left">申请时间</div>
            <div class="right">{{ formData.createTime }}</div>
          </div>
        </div>
        <div class="register_info">
          <div class="self_title_bold">{{ formTitle }}信息</div>
          <div v-if="formData.formId == '1' || formData.formId == '2' || formData.formId == '3'">
            <div class="leave_time">
              <div class="out_title">
                <span class="text">{{ formData.formId == '2' ? '公务外出类型' : '请假类型' }}</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.leaveName" />
              </div>
            </div>
            <div class="leave_time add_tips" v-if="formData.isSpecialSick === '1'">
              <div class="cell">提示：逾期未上传病假凭证，系统已转事假。</div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">{{ formData.formId == '2' ? '预计开始时间' : '请假开始时间' }}</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.startTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">{{ formData.formId == '2' ? '预计结束时间' : '请假结束时间' }}</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.endTime" />
              </div>
            </div>
            <div class="leave_time" v-if="formData.leaveId == '25'">
              <div class="out_title">
                <span class="text">请假区间</span>
              </div>
              <div class="cell">
                <van-cell
                  :value="
                    moment(formData.startTime).format('HH:mm:ss') == '08:00:00' ? '上班后一小时' : '下班前一小时'
                  " />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">{{ formData.formId == '2' ? '外出' : '请假' }}天数</span>
              </div>
              <div class="cell">
                <van-cell
                  :value="
                    formData.calendarDays && formData.calendarDays != '0'
                      ? '工作日' + formData.regDays + '天，日历日' + formData.calendarDays + '天'
                      : '工作日' + formData.regDays + '天'
                  " />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">{{ formData.formId == '2' ? '外出' : '请假' }}小时数</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.regHours + '小时'" />
              </div>
            </div>
            <div class="leave_time" v-if="formData.formId !== '3'">
              <div class="out_title">
                <span class="text">{{ formData.formId == '2' ? '外出事由' : '请假事由' }}</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.reason" />
              </div>
            </div>
            <div
              class="duty_file"
              v-if="formData.formId == '3' && formData.leaveEnclosureList && formData.leaveEnclosureList.length > 0">
              <div class="duty_file_title">
                <span>请假附件</span>
              </div>
              <ImgUpload :albumList="formData.leaveEnclosureList" :entry="false" />
            </div>
            <div class="leave_time" v-if="formData.formId == '3'">
              <div class="out_title">
                <span class="text">销假时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.backTime" />
              </div>
            </div>
            <div class="leave_time" v-if="formData.formId !== '3'">
              <div class="out_title">
                <span class="text">顶岗人员姓名</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.replaceName" />
              </div>
            </div>
            <div class="leave_time" v-if="formData.formId !== '3'">
              <div class="out_title">
                <span class="text">联系电话</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.replaceMobile" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">备注</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.formId !== '3' ? formData.extentName : formData.remark" />
              </div>
            </div>
            <div class="duty_file" v-if="formData.enclosureList && formData.enclosureList.length > 0">
              <div class="duty_file_title">
                <span>附件</span>
              </div>
              <ImgUpload :albumList="formData.enclosureList" :entry="false" />
            </div>
          </div>
          <div v-if="formData.formId == '4'">
            <div class="leave_time">
              <div class="out_title">
                <span class="text">加班开始时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.startOverTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">加班结束时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.endOverTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">加班小时数</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.overHours + '小时'" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">抵扣考勤开始时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.startTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">抵扣考勤结束时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.endTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">工作事由</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.reason" />
              </div>
            </div>
          </div>
          <div v-if="formData.formId == '5'">
            <div class="leave_time">
              <div class="out_title">
                <span class="text">补卡时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.startTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">补卡类型</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.leaveName" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">补卡原因</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.reason" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">备注</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.remark" />
              </div>
            </div>
          </div>
          <div v-if="formData.formId == '6'">
            <div class="leave_time">
              <div class="out_title">
                <span class="text">加班开始时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.startOverTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">加班结束时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.endOverTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">调休开始时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.startTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">调休结束时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.endTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">调休事由</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.reason" />
              </div>
            </div>
            <div class="duty_file" v-if="formData.enclosureList && formData.enclosureList.length > 0">
              <div class="duty_file_title">
                <span>附件</span>
              </div>
              <ImgUpload :albumList="formData.enclosureList" :entry="false" />
            </div>
          </div>
          <div v-if="formData.formId == '7'">
            <div class="leave_time">
              <div class="out_title">
                <span class="text">出行范围</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.extentName" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">原单位是否同意</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.isOrganAgree == '1' ? '是' : '否'" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">出行目的地</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.outDest" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">是否中高风险区</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.isRiskZone == '1' ? '是' : '否'" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">出行时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.startTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">返回时间</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.endTime" />
              </div>
            </div>
            <div class="leave_time">
              <div class="out_title">
                <span class="text">出行天数</span>
              </div>
              <div class="cell">
                <van-cell :value="formData.regDays + '天'" />
              </div>
            </div>
            <div class="duty_file" v-if="formData.enclosureList && formData.enclosureList.length > 0">
              <div class="duty_file_title">
                <span>附件</span>
              </div>
              <ImgUpload :albumList="formData.enclosureList" :entry="false" />
            </div>
          </div>
        </div>
      </div>
      <van-collapse class="check_main" v-model="activeName2" accordion>
        <van-collapse-item name="0">
          <template #title>
            <div class="type_title_bold">审批流程</div>
          </template>
          <AttendSteps :approveFlow="approveFlow" />
        </van-collapse-item>
      </van-collapse>
      <div class="outduty_detail" v-if="formData.isCanceled === '1' && formData.formId === '1'">
        <div class="register_info">
          <div class="leave_time">
            <div class="self_title_bold">销假时间</div>
            <div class="cell">
              <van-cell :value="formData.backTime" />
            </div>
          </div>
          <div class="self_title_bold" style="margin-top: 5px">实际请假</div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">开始时间</span>
            </div>
            <div class="cell">
              <van-cell :value="formData.validStartTime" />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">结束时间</span>
            </div>
            <div class="cell">
              <van-cell :value="formData.validEndTime" />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">请假小时数</span>
            </div>
            <div class="cell">
              <van-cell :value="formData.validHours + '小时'" />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">请假天数</span>
            </div>
            <div class="cell">
              <van-cell :value="'工作日' + formData.validDays + '天，日历日' + formData.validCalendarDays + '天'" />
            </div>
          </div>
          <template v-if="formData.cancelEnclosureList && formData.cancelEnclosureList.length > 0">
            <div class="self_title_bold" style="margin-top: 5px">销假附件</div>
            <div class="duty_file">
              <ImgUpload :albumList="formData.cancelEnclosureList" :entry="false" />
            </div>
          </template>
        </div>
      </div>

      <div
        class="detail_duty_check"
        v-if="$route.query.type == '1' && formData.dailyStatus == '0' && formData.canApprove == '1'">
        <div class="check_title">审批意见</div>
        <div class="check_field">
          <van-cell-group>
            <van-field
              v-model="suggest"
              show-word-limit
              maxlength="100"
              placeholder="请输入审批意见"
              type="textarea"
              rows="3"
              autosize />
          </van-cell-group>
        </div>
        <div class="check_btn">
          <van-button type="info" size="normal" @click="btnCheck('1')">通 过</van-button>
          <van-button type="warning" plain size="normal" @click="btnCheck('2')">不通过</van-button>
          <van-button type="warning" plain size="normal" @click="btnCheck('3')">退 回</van-button>
        </div>
      </div>
      <div
        class="fead_boot"
        v-if="
          $route.query.type == '2' &&
          (formData.canRevoke === '1' || formData.isCanZZ === '1' || formData.isShowCancel === '1')
        ">
        <div class="btn_li" @click="btnBack()" v-if="formData.canRevoke == '1'">撤回</div>
        <div class="btn_li" @click="endOut()" v-if="formData.isCanZZ == '1'">终止</div>
        <div class="btn_li" @click="backForm()" v-if="formData.isShowCancel == '1'">一键销假</div>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import { getAttendanceDailyInfo, updateAttendanceDailyStatus } from '@api/api-attendance.js'
import AttendSteps from './components/AttendSteps'
import moment from 'moment'
import ImgUpload from '@com/ImgUpload'
export default {
  name: 'dutyDetail',
  components: {
    ImgUpload,
    MyNavBar,
    AttendSteps,
  },
  props: {},
  data() {
    return {
      //type,1审核，2退回，3知会，4系统消息,5是自己
      moment: moment,
      title: '请假单',

      formData: {
        formId: '2',
      },
      activeName2: '', //审批流程
      suggest: '',
      formTitle: '',
      approveFlow: {},
      leaveIdList: ['3', '4', '5', '6', '21', '22', '24', '25', '29'], // <!-- 22丧假,3婚假,4产假,21陪产假,6陪产假,5年休假,25哺乳假,24育儿假,29独生子女护理假-->
    }
  },
  computed: {},
  watch: {},
  created() {
    this.approveFlow = {
      formId: this.$route.query.formId,
      processInstanceId: this.$route.query.processInstanceId,
      type: '2',
    }
  },
  mounted() {
    this.getAttendanceLeaveInfo()
  },
  methods: {
    menuData(status) {
      switch (status) {
        case '0':
          return '审批中'
          break
        case '1':
          return '通过'
          break
        case '2':
          return '不通过'
          break
        case '3':
          return '已退回'
          break
        case '4':
          return '已撤回'
          break
        case '5':
          return '已终止'
          break
        default:
          break
      }
    },
    goback() {
      this.$router.go(-1)
    },
    getAttendanceLeaveInfo() {
      // 获取登记详情
      getAttendanceDailyInfo({
        id: this.$route.query.id,
        formId: this.$route.query.formId,
      }).then(res => {
        if (res.status === 200) {
          this.formData = res.data
          this.title = this.formData.formName
          this.formTitle = this.formData.formName.substring(0, this.formData.formName.length - 1)
          if (
            (this.formData.formId == '1' || this.formData.formId == '3') &&
            this.leaveIdList.includes(this.formData.leaveId)
          ) {
            if (this.formData.leaveId == '5' || this.formData.leaveId == '24') {
              let morNing = ''
              let afterNoon = ''
              if (moment(this.formData.startTime).format('HH:mm:ss') == '08:00:00') {
                morNing = '上午'
              } else if (
                moment(this.formData.startTime).format('HH:mm:ss') == '12:00:00' ||
                moment(this.formData.startTime).format('HH:mm:ss') == '13:00:00'
              ) {
                morNing = '下午'
              }
              if (
                moment(this.formData.endTime).format('HH:mm:ss') == '12:00:00' ||
                moment(this.formData.endTime).format('HH:mm:ss') == '13:00:00'
              ) {
                afterNoon = '上午'
              } else if (moment(this.formData.endTime).format('HH:mm:ss') == '18:00:00') {
                afterNoon = '下午'
              }
              this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD') + morNing
              this.formData.endTime = moment(this.formData.endTime).format('YYYY-MM-DD') + afterNoon
            } else {
              this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD')
              this.formData.endTime = moment(this.formData.endTime).format('YYYY-MM-DD')
            }
          } else {
            this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD HH:mm')
            this.formData.endTime = moment(this.formData.endTime).format('YYYY-MM-DD HH:mm')
          }
        }
      })
    },
    btnCheck(type) {
      let content = ''
      if (this.suggest == '') {
        if (type == '1') {
          content = '同意'
        } else if (type == '2' || type == '3') {
          this.$toast.fail('请填写审批意见')
          return
        }
      } else {
        content = this.suggest
      }

      this.$dialog
        .confirm({
          message: '您确定要提交考勤审批吗？',
        })
        .then(() => {
          updateAttendanceDailyStatus({
            content: content,
            dailyId: this.$route.query.id,
            formId: this.$route.query.formId,
            status: type,
            processInstanceId: this.$route.query.processInstanceId,
            taskId: this.$route.query.taskId,
          }).then(res => {
            if (res.status === 200) {
              setTimeout(() => {
                this.$toast.success('提交成功')
                this.$router.go(-1)
              }, 100)
            } else {
              this.$dialog
                .alert({
                  message: res.message,
                })
                .then(() => {})
            }
          })
        })
        .catch(() => {})
    },

    endOut() {
      this.$dialog
        .confirm({
          message: '您确定要终止登记吗？',
        })
        .then(() => {
          updateAttendanceDailyStatus({
            content: '',
            dailyId: this.$route.query.id,
            formId: this.$route.query.formId,
            status: '5',
            processInstanceId: this.$route.query.processInstanceId,
            taskId: this.$route.query.taskId,
          }).then(res => {
            if (res.status === 200) {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.formData = {}
                this.$router.go(-1)
              }, 500)
            } else {
              this.$dialog
                .alert({
                  message: res.message,
                })
                .then(() => {})
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    btnBack() {
      this.$dialog
        .confirm({
          message: '您确定要撤回表单吗？',
        })
        .then(() => {
          updateAttendanceDailyStatus({
            content: '',
            dailyId: this.$route.query.id,
            formId: this.$route.query.formId,
            status: '4',
            processInstanceId: this.$route.query.processInstanceId,
            taskId: this.$route.query.taskId,
          }).then(res => {
            if (res.status === 200) {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.formData = {}
                this.$router.go(-1)
              }, 500)
            } else {
              this.$dialog
                .alert({
                  message: res.message,
                })
                .then(() => {})
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    backForm() {
      const data = {
        id: this.$route.query.id,
        title: '销假单',
        formId: this.$route.query.formId,
        btn: 'one',
        // dailyId: this.$route.query.id,
      }
      this.$router.push({ path: '/addOutDuty', query: data })
    },
  },
}
</script>

<style lang="scss" scoped>
.out_detail {
  background-color: #f7f7f7;
}
.notice_con {
  padding: 5px 0 60px;
  .outduty_detail {
    font-size: 13px;
    color: #333333;
    padding: 0 5px;
    .result_hint {
      width: 100%;
      text-align: center;
      padding: 8px;
      font-size: 14px;
      background-color: rgba(230, 127, 43, 0.1);
      .r_btn_success {
        color: #67c23a;
      }
      .r_btn_primary {
        color: #ee792f;
      }
      .r_btn_red {
        color: #f56c6c;
      }
    }
    .out_title {
      color: #333;
      margin-bottom: 15px;
      .text {
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        word-break: keep-all;
      }
    }
    .self_title_bold {
      font-weight: bold;
    }
    .self_info {
      width: 100%;
      background-color: #ffffff;
      padding: 10px 20px;
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      position: relative;
      overflow: hidden;
      .correlation_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #efefef;
      }
    }
    .register_info {
      background-color: #ffffff;
      padding: 10px 20px;
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      margin-top: 10px;
      .duty_file {
        .duty_file_title {
          // font-size: 14px;
          color: #333;
          margin-top: 10px;
          span {
            background-image: linear-gradient(#ffffff 50%, #f9f1e8);
          }
        }
      }
      .style {
        padding-bottom: 15px;
        border-bottom: 1px solid #efefef;
      }
      .leave_time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #efefef;
        .out_title {
          margin-bottom: 0;
        }
        .cell {
          word-break: break-all;
          margin-left: 10px;
          /deep/.van-cell__value {
            // text-align: right;
            color: #999999;
            font-size: 12px;
          }
        }
      }
      .add_tips {
        color: #909399;
        padding: 5px 0;
        color: #d9110d;
      }
    }
  }
  .check_main {
    background-color: #ffffff;
    padding: 5px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    margin: 10px 5px 0;
    border-radius: 4px;
    .type_title_bold {
      // font-size: 14px;
      color: #333333;
      font-weight: bold;
    }
  }
  .detail_duty_check {
    margin: 10px 5px 0;
    background-color: #ffffff;
    padding: 5px 15px 15px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 4px;
    .check_title {
      // font-size: 14px;
      color: #333333;
      font-weight: bold;
      margin-top: 8px;
    }
    .check_field {
      margin-top: 8px;
      /deep/ .van-cell {
        border: 2px solid #ebedf0;
        font-size: 12px;
      }
    }
    .check_btn {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      padding: 0 15px;
      /deep/.van-button {
        height: 30px;
      }
    }
  }
}
</style>
